import { Menu } from "antd"
import { Side } from "./styled"
import { useModel, styled, history } from '@umijs/max'
import { useEffect, useState } from "react"
import { trans } from "./utils"

const Header = styled.div`
  width: 100%;
  height: 70px;
  padding: 11px 6px;
  position: relative;
  z-index: 2;
  background-color: #fff;

  img {
    max-width: 100%;
    height: 100%;
  }
`

const Content = styled.div`
  width: 100%;
  flex: 1;
  overflow-y: auto;
  box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.1);
  position: relative;
  z-index: 1;

  &::-webkit-scrollbar {
    display: none;
  }
`

const useSide: React.FC = () => {
  const { initialState } = useModel('@@initialState')
  const [items, setItems] = useState<Item[]>([]);
  const { activeTabKey, menuOpenKeys, setMenuOpenKeys } = useModel('global')

  const onMenuClick = (info: MenuInfo) => {
    history.push(info.key)
  }

  useEffect(() => {
    if (initialState?.menuList.length) {
      setItems(trans(initialState.menuList))
    }
  }, [initialState?.menuList])

  return (
    <Side>
      <Header>
        <img src='https://homechargesmall.liaoqianapp.com/img/leftTopLogo.png' />
      </Header>
      <Content>
        <Menu
          mode="inline"
          onClick={onMenuClick}
          openKeys={menuOpenKeys}
          selectedKeys={activeTabKey ? [activeTabKey] : []}
          onOpenChange={setMenuOpenKeys}
          items={items}
        />
      </Content>
    </Side>
  )
}

export default useSide